<template>
  <div class="message-group">
    <MPanelTitle v-if="props.title" :title="props.title"></MPanelTitle>
    <div class="form-group_content">
      <slot />
    </div>
  </div>
</template>

<!--组件自定义-显示面板-->
<script setup lang="ts">
import MPanelTitle from './MPanelTitle.vue'

const props = defineProps<{ title: string, icon?: string }>()

</script>

<style scoped lang="less">
.message-group {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 24px;
  background: linear-gradient(232deg, #f2f3f7 0%, #f2f3f7 100%);
  box-shadow: 0px 5px 10px 0px rgba(72, 81, 96, 0.1);
  border-radius: 8px;
  border-bottom: 0.5px solid #FFFFFF;

  .form-group_content {
    width: calc(100% - 96px);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 48px;
    margin-right: 48px;
  }
}
</style>
